Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Grid Style Table
We can add a grid-style table into our Vue app with Quasar’s q-table component.
For instance, we can write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-table
grid
title="Treats"
:data="data"
:columns="columns"
row-key="name"
:filter="filter"
hide-header
>
<template v-slot:top-right>
<q-input
borderless
dense
debounce="300"
v-model="filter"
placeholder="Search"
>
<template v-slot:append>
<q-icon name="search"></q-icon>
</template>
</q-input>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "name",
required: true,
label: "Dessert",
align: "left",
field: (row) => row.name,
format: (val) => `${val}`,
sortable: true
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
];
const data = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
calcium: "14%"
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
calcium: "8%"
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
calcium: "6%"
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
calcium: "0%"
},
{
name: "Donut",
calories: 452,
fat: 25.0,
calcium: "2%"
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
calcium: "12%"
}
];
new Vue({
el: "#q-app",
data: {
columns,
data,
filter: ""
}
});
</script>
</body>
</html>
We add the grid prop to turn the table into a grid with each row’s data displayed in its own cell.
The filter prop takes a string reactive property.
We put a q-input in the top-right slot to add a search input into the top right corner.
When we type in some keywords into the search box, the filtering will be done automatically.
The style of the grid cards can be changed with the card-class prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-table
grid
card-class="bg-primary text-white"
title="Treats"
:data="data"
:columns="columns"
row-key="name"
:filter="filter"
hide-header
>
<template v-slot:top-right>
<q-input
borderless
dense
debounce="300"
v-model="filter"
placeholder="Search"
>
<template v-slot:append>
<q-icon name="search"></q-icon>
</template>
</q-input>
</template>
</q-table>
</div>
</q-layout>
</div>
<script>
const columns = [
{
name: "name",
required: true,
label: "Dessert",
align: "left",
field: (row) => row.name,
format: (val) => `${val}`,
sortable: true
},
{
name: "calories",
align: "center",
label: "Calories",
field: "calories",
sortable: true
},
{ name: "fat", label: "Fat (g)", field: "fat", sortable: true },
{
name: "calcium",
label: "Calcium (%)",
field: "calcium",
sortable: true,
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
];
const data = [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
calcium: "14%"
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
calcium: "8%"
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
calcium: "6%"
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
calcium: "0%"
},
{
name: "Donut",
calories: 452,
fat: 25.0,
calcium: "2%"
},
{
name: "KitKat",
calories: 518,
fat: 26.0,
calcium: "12%"
}
];
new Vue({
el: "#q-app",
data: {
columns,
data,
filter: ""
}
});
</script>
</body>
</html>
Conclusion
Quasar’s q-table component can be rendered as a grid with the row data displayed in each grid cell.
